<template>
  <header
    class="w-full bg-white/30 backdrop-blur-lg border border-white/30 rounded-sm fixed left-0 dark:bg-gray-900 shadow-lg header z-10 md:hidden"
  >
    <div
      class="max-w-7xl dark:bg-gray-900 mx-auto px-4 py-2 flex items-center justify-between"
    >
      <My-svg-icon
        @click="$router.back()"
        class="w-2 h-2 cursor-pointer"
        name="back"
      ></My-svg-icon>
      <a
        class="text-xl text-zinc-900 dark:text-zinc-50 font-semibold cursor-pointer"
        >{{ title }}</a
      >
      <i
        @click="toggleMobileMenu"
        class="fas fa-bars text-lg cursor-pointer text-black"
      ></i>
    </div>
    <!-- 移动端菜单 -->
    <div
      v-show="showMobileMenu"
      class="absolute animate__animated animate__fadeInDown duration-200 top-7 left-0 right-0 header z-10 bg-white/10 backdrop-blur-lg border border-white/10 shadow-lg"
    >
      <!-- 菜单内容 -->

      <MdCatalog
        class="text-sm font-semibold overflow-scroll bg-white/90 backdrop-blur-lg border border-white/10 shadow-lg dark:text-zinc-100 text-zinc-800 w-full dark:bg-zinc-900"
        :editorId="id"
        :toc="toc"
        :onClick="handleCatalogClick"
        :onGetCatalog="onGetCatalog"
      />
    </div>
  </header>
</template>

<script setup>
import { ref, defineEmits, defineProps } from 'vue'
import { MdCatalog } from 'md-editor-v3'
const emits = defineEmits(['handleCatalogClick', 'onGetCatalog'])
// 移动端菜单显示控制
const showMobileMenu = ref(false)
const handleCatalogClick = (e, tocItem) => {
  showMobileMenu.value = !showMobileMenu.value
  emits('handleCatalogClick', e, tocItem)
}
const onGetCatalog = () => {
  emits('onGetCatalog')
}
const props = defineProps({
  toc: {
    type: Object,
    require: false,
    default: []
  },
  title: {
    type: String,
    require: true,
    default: '计算机科学知识'
  },
  id: {
    type: String,
    require: true
  },
  mode: {
    type: String,
    require: true,
    default: 'light'
  }
})
console.log(props.mode)

const toggleMobileMenu = () => {
  showMobileMenu.value = !showMobileMenu.value
}
</script>

<style lang="scss" scoped></style>
